<template>
  <div>
    <!-- 头部组件 -->
    <header-nav></header-nav>
    <van-index-bar>
      <div v-for="(item,index) in rightList" :key="index">
      <van-index-anchor :index="item.name" />
      <van-cell v-for="value in item.data" :key="value.id" @click="singerinfo(value.id)">
        <template #title>
          <van-image
            round
            width="3rem"
            height="3rem"
            :src="value.img1v1Url"
          />
          <span class="custom-title">{{value.name}}</span>
        </template>
      </van-cell>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import headerNav from "../components/base/headerNav.vue";
import { getArtist } from "../api/singer";
export default {
  data() {
    return {
      leftList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K","L","M","N","O","P","Q","R","S","T","U","V","W","S","Y","Z"],
      rightList:[

      ]
    };
  },
  components: {
    headerNav,
  },

  methods:{
    ArtistFun(){
      for (let i = 0; i < this.leftList.length; i++) {
        this.rightList.push({
          name:this.leftList[i]
        })
      }
    },
    singerinfo(id){
      console.log(id)
      this.$router.push({
        path:'/rank/singerlist',
        query:{
          id:id
        }
      })
    }
  },
  created() {
  this.ArtistFun(); //构建对象
  console.log(this.rightList)
    for (let i = 0; i < 1; i++) {
      getArtist({
        type: 1,
        area: 96,
        initial: this.leftList[i],
      }).then((data) => {
        let index = this.rightList.findIndex(item=>item.name == this.leftList[i])
        // 1.this.rightList[index].data = data.artists;//不合理写法，对象直接赋值，vue监听不到数据变化
        // console.log(data);
        // 2.使用this.$set(对象，属性，数据)
        this.$set(this.rightList[index],'data',data.artists)
        // console.log(this.rightList)
      });
    }
  },
};
</script>

<style lang="less">
.van-index-anchor {
  background-color: #d9dadb;
}
.van-cell {
  .van-image,
  .custom-title,
  .danger {
    display: inline-block;
    vertical-align: middle;
  }
  span {
    margin-left: 25px;
  }
}
</style>